<template>
    <div class="empty-box">
        <svg-icon :icon-class="imgUrl" :style="{ 'fontSize': props.size }" />
        <div class="empty-title">
            {{ title  }}
            <div class="empty-desc">
                {{ desc }}
                <a v-if="props.retry" style="color: #3067EF;" @click.stop="handelRetry">{{ props.retry }}</a> 
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
defineOptions({ name: 'PageEmpty' })

const emit = defineEmits(['onRetry'])

const imgUrl = computed(() => {
    switch (props.type) {
        case '1':
            return 'empty1'
        case '2':
            return 'empty2'
        case '3':
            return 'empty3'
        case '4':
            return 'empty1'
        case '5':
            return 'empty2'
        default:
            return 'empty1'
    }
})

const title = computed(() => {
    if(props.text1) return props.text1
    switch (props.type) {
        case '1':
            return '智能体列表为空'
        case '2':
            return '没有找到相关的智能体'
        case '3':
            return '加载失败'
        case '4':
            return '知识库为空'
        case '5':
            return '没有找到相关文件'
        default:
            return '智能体列表为空'
    }
})

const desc = computed(() => {
    if(props.text2) return props.text2
    switch (props.type) {
        case '1':
            return '您的智能体列表目前为空，若未创建智能体请到智能体配置内创建， 若已创建智能体可联系管理员检查权限设置'
        case '2':
            return '当前搜索没有匹配到任何结果，请检查输入或尝试其他关键词'
        case '3':
            return '加载失败，请重试'
        case '4':
            return '请先创建知识库后，上传文件以便开始构建您的知识库'
        case '5':
            return '当前搜索没有匹配到任何结果，请检查输入或尝试其他关键词'
        default:
            return '您的智能体列表目前为空，若未创建智能体请到智能体配置内创建， 若已创建智能体可联系管理员检查权限设置'
    }
})

const props = defineProps({
    type: {
        type: String,
        default: ''
    },
    text1: {
        type: String,
        default: ''
    },
    text2: {
        type: String,
        default: ''
    },
    size: {
        type: String,
        default: '312px'
    },
    retry: {
        type: String, 
        default: ''
    }
})

function handelRetry(){
    emit('onRetry')
}

</script>

<style lang="scss" scoped>

.empty-box {
   width: 326px;
   height: 298px;
   position: absolute;
   text-align: center;
   left: 50%;
   top: 50%;
   margin-top: -164px;
   margin-left: -163px;
   background: #fff;
   div {
    width: 100%;
   }
   .empty-title{
        position: absolute;
        bottom: 0;
        color: #333;
        .empty-desc{
            color: #BCBCBC;
            font-size: 12px;
            margin-top: 10px;
        }
   }
}
.home-list-container-open {
  .empty-box {
    margin-top: -50px;
  }
}

</style>
